<template>
	<view class="a-list-container">
		<view class="list-header">
			<text class="header-text">热门文章</text>
			<img src="/static/category.png" alt="" style="width: 50rpx;height: 100%; margin-left:auto">
		</view>
		<view class="divider"></view>
		<view class="list-content">
			<view v-for="(item, index) in articles" :key="index" class="article-item">
				<view class="article-index">{{index + 1}}</view>
				<view class="article-title">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"a-list",
		data() {
			return {
				articles: [
					{ title: "Ubuntu 18.04 优化指南" },
					{ title: "Ubuntu 18.04 优化指南" },
					{ title: "Ubuntu 18.04 优化指南" },
					{ title: "Ubuntu 18.04 优化指南" },
				]
			};
		}
	}
</script>

<style>
.a-list-container {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	height: 100%;
}

.list-header {
	display: flex;
	margin-bottom: 20rpx;
}

.header-text {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

.divider {
	height: 2rpx;
	background: linear-gradient(to right, #4a6572, #eef2f3);
	margin-bottom: 30rpx;
}

.article-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
	transition: transform 0.5s ease;
}
.article-item:hover
{
	transform: translateX(12rpx);
}
.article-index {
	width: 40rpx;
	height: 40rpx;
	background-color: #4a6572;
	color: white;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
	margin-right: 20rpx;
}

.article-title {
	font-size: 28rpx;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.article-item:hover .article-title {
	color: #4a6572;
}
</style>